<template>
  <div style="display: inline-block; margin-right: 10px">
    <el-popover
      v-model="visible"
      placement="bottom"
      width="250"
      trigger="click"
      @show="showVisible()"
    >
      <div>
        <div class="flex-between" style="height: 30px">
          <div><p>展示字段</p></div>
          <div>
            <el-button type="text" @click="defineFieldReset()">重置</el-button>
          </div>
        </div>
        <el-checkbox-group
          v-show="renderComponent"
          v-model="checkedCities"
          style="height: 300px"
        >
          <el-scrollbar class="tableHeadesScrollbar">
            <el-checkbox
              v-for="(item, index) in tableHeadsSon"
              :key="index"
              v-dragging="{ 'item': item, 'list': tableHeadsSon, 'group': 'item' }"
              style="line-height: 26px; display: block"
              :label="item.value"
              :class="[{ ActiveDashed: index == activeIndex }]"
              @mouseover.native="CheckBoxClick(index)"
            >{{ item.value }}
            </el-checkbox>
          </el-scrollbar>
        </el-checkbox-group>
        <div style="text-align: right; margin-top: 4px">
          <el-link
            :underline="false"
            style="margin-right: 6px"
            @click="visible = false"
          >
            取消
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            @click="confirm()"
          >确定</el-link>
        </div>
      </div>
      <el-button
        slot="reference"
        icon="el-icon-setting"
        size="mini"
        type="primary"
        plain
      >字段设置</el-button>
    </el-popover>
  </div>
</template>

<script>
import { getColumn, columnSave } from '@/api/statistics';
export default {
  name: 'TableHeades',
  props: {
    column: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 缓存中记录每个页面的key
    tableId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      tableHeadsSon: [],
      activeIndex: 0,
      visible: false,
      renderComponent: true,
      checkedCities: []
    };
  },

  computed: {

  },
  mounted() {
  },
  methods: {
    showVisible() {
      this.getColumn();
    },
    async getColumn() {
      let column = [];
      try {
        const res = await getColumn({ module: this.tableId });
        if (res.data.columnList.length > 0) { // 数据库存储
          column = res.data.columnList;
        } else if (localStorage.getItem(this.tableId)) { // 本地存储
          column = JSON.parse(localStorage.getItem(this.tableId));
        } else { // 基础配置
          column = this.column;
        }
        this.initData(column);
      } catch (e) {
        if (localStorage.getItem(this.tableId)) {
          column = JSON.parse(localStorage.getItem(this.tableId));
        } else {
          column = this.column;
        }
        this.initData(column);
      }
    },
    initData(column) {
      this.tableHeadsSon = column.map(ele => {
        return ele;
      });
      this.checkedCities = [];
      this.tableHeadsSon.forEach(ele => {
        if (ele.show) {
          this.checkedCities.push(ele.value);
        }
      });
    },
    defineFieldReset() {
      this.columnSave(this.column);
    },
    CheckBoxClick(i) {
      this.activeIndex = i;
    },
    confirm() {
      let tableHeadsSon = this.tableHeadsSon.map(ele => {
        if (this.checkedCities.indexOf(ele.value) >= 0) {
          ele.show = true;
        } else {
          ele.show = false;
        }
        return ele;
      });
      this.columnSave(tableHeadsSon);
    },
    async columnSave(tableHeadsSon) {
      const res = await columnSave({
        module: this.tableId,
        columnList: tableHeadsSon
      });
      localStorage.setItem(this.tableId, JSON.stringify(tableHeadsSon));
      this.visible = false;
      this.$emit('handelrender', tableHeadsSon);
    }
  }
};
</script>

<style scoped>
.t_body {
  padding-left: 5px;
}

.cardContainer {
  height: 34px;
  line-height: 34px;
  padding-top: 10px;
}

.cardContainer:hover {
  background-color: #eeeeee;
  color: #409eff;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.juzhong {
  vertical-align: middle;
  cursor: pointer;
}
.el-scrollbar {
  height: 100%
}
.ActiveDashed {
  width: 100%;
  border: 1px dashed #ccc;
  margin: 0 auto;
  cursor: move;
}
</style>
<style lang="scss">
.tableHeadesScrollbar {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-scrollbar__bar.is-horizontal, .el-scrollbar__bar.is-vertical {
      width: 0!important;
  }
}
</style>
